<!DOCTYPE html>

<html>
    <head>
        <title>无缝滚动2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
             *{margin: 0;padding: 0;list-style-type: none;text-decoration: none;}
            #div1{width:1130px;height: 550px;padding: 40px 0;position: relative;margin: auto;}
            #div2{width: 960px;height: 540px;background:#ccc;margin: 0 auto;border:5px solid #0ff;position: relative;overflow: hidden;}
            ul{width:960px;height:4320px;left:0;top:0;position: absolute;}
            li {width: 960px;height: 540px;float:left;}
            img{width: 100%;height:100%;}
            a{width: 80px;height: 100px;font-size: 18px;line-height:100px;text-align: center;background: #000;color: #fff;}
            .left{position: absolute;left: 0;top:50%;margin-top:-50px; }
            .bottom{position: absolute;right:0;top:50%;margin-top:-50px; }
        </style>
    </head>
    <body>
          <div id="div1">
            <div id="div2">
            <ul>
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
                <li><img src="img/6.jpg" alt=""></li>
                <li><img src="img/7.jpg" alt=""></li>
                <li><img src="img/8.jpg" alt=""></li>
            </ul>
            </div>
            <a href="javascript:;" class="left">top</a>
            <a href="javascript:;" class="bottom">bottom</a>
        </div>    
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var Top=$(".left");
            var bottom=$(".bottom");
            var ul=$("ul");
            var li_size=$("li").length;
            var li_h=$("li").outerHeight(true);
            var tick;
            var div=$("#div2");
            Top.click(function(){
               ul.stop(true,true).animate({"top":-li_h},1000,function(){
                  ul.append($("ul li").first());
                  ul.css({"top":0});
               });
            });
           bottom.click(function(){
               ul.css({"top":-li_h});
               $("ul li").last().insertBefore($("ul li").first());
               ul.stop().animate({"top":0},1000);
           });
          
           div.hover(function(){
               clearInterval(tick);
           },function(){
               tick=setInterval(function(){
               Top.click();
           },1000);
           });
        </script>
    </body>
</html>
